<template>
    <el-select clearable remote
               :remote-method="remoteMethod"
               @visible-change="visibleHandler"
               @change="selectHandle"
               v-model="appId" filterable @clear="setDefaultValue"
               placeholder="请选择"
               style="width:260px;">

      <div v-infinite-scroll="getLoad"
           :infinite-scroll-disabled="busy"
      >
        <el-option label="default(我的)"
                   :value="'default'"></el-option>
        <el-option label="public(公开)" v-if="isPublic"
                   :value="'public'"></el-option>
        <el-option
          v-for="item in appIds"
          :key="item.id"
          :label="item.appId"
          :value="item.appId"
        ></el-option>
      </div>
    </el-select>
</template>
<script>

  import infiniteScroll from '@/components/Select/directive';

  export default {
    directives: {infiniteScroll},
    name: "appId",
    props: {
      value: Number,
      isPublic: Boolean,
      isInit: Number,
    },
    data() {
      return {
        appIds: [],
        appId: 'default',
        pageSize: 10,
        currentPage: 1,
        haveData: true,
        setDefaultStatus:false,
        busy: false,
        data: {
          appId: ''
        }
      }
    },
    computed: {

    },
    mounted() {
    },

    watch: {
      isInit(a) {
          this.appId='default'
      }
    },
    methods: {
      remoteMethod(val) {
        console.log("remoteMethod",val)
        this.currentPage = 1;
        this.appId = val.trim();
        this.haveData = true;
        this.getList(val);
      },
      visibleHandler(e) {
        // console.log("visibleHandler", this.appIds)
        console.log("visibleHandler", this.appId)
        // console.log("e", e)
        // if(this.appId==='default'||this.appId==='public'){
        //
        // }else{
        // }
        // if (!e&&!this.setDefaultStatus) {
        //   this.remoteMethod(this.appId);
        // }else{
        //
        // }
        this.setDefaultStatus=false;
      }
      ,
      selectHandle(appId) {
        console.log("selectHandle", this.appId)
        this.$emit('appIdInput', this.appId)
      },
      setDefaultValue() {
        console.log("setDefaultValue", this.appIds)
        this.appId = '';
        this.appIds = [];
        this.setDefaultStatus=true;
        this.remoteMethod('');

      },
      getLoad () {
        console.log('123',this.isPublic);
        this.getList();
      },
      getList(appId) {
        if (!this.haveData) return;
        this.busy = true;
        this.data.appId = appId;
        this.$http({
          url: this.$http.adornUrl('/sys/appt/listByDto'),
          method: 'post',
          data: this.$http.adornData({
            'data': this.data,
            'pageNum': this.currentPage,
            'pageSize': this.pageSize
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.appIds = (this.currentPage === 1 ? [] : this.appIds).concat(data.page.list);
            this.currentPage += 1;
            if (data.page.list.length < 10) {
              this.haveData = false;
            }
            this.busy = false;
            console.log('222',this.appIds);
            // this.dataForm.groupName = this.groups[0].name
            // this.initDataList();
          } else {
          }
        })
      },

    }
  };
</script>
<style>
</style>


